<template>
    <div>
        <div class="title_wrap">
            <el-date-picker size="mini" style="width: 220px" type="daterange" v-model="tubiao1range"
                value-format="timestamp" :picker-options="{ disabledDate: disabledDate }"></el-date-picker>

            <el-button-group style="margin-left: 20px;">
                <el-button size="mini" @click="cgTB1rg(3)">近3天</el-button>
                <el-button size="mini" @click="cgTB1rg(7)">近7天</el-button>
                <el-button size="mini" @click="cgTB1rg(30)">近1月</el-button>
                <el-button size="mini" @click="cgTB1rg(366 / 2)">近半年</el-button>
                <el-button size="mini" @click="cgTB1rg(365)">近一年</el-button>
            </el-button-group>
        </div>

        <!-- ref是盒子的名字 -->
        <div ref="tubiao1box" class="tubiao1"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { fetchTubiao1 } from '@/api/index';

export default {
    data() {
        return {
            tubiao1range: [Date.parse(new Date()) - 5 * 86400000, Date.parse(new Date())]
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.tubiao1 = echarts.init(this.$refs.tubiao1box);
        // 绘制图表
        this.tubiao1.setOption({
            animation: false,
            title: {
                text: '日销售额',
                textAlign: 'center',
                left: 400,
                textStyle: {
                    // color: '#ff3388',
                    // fontSize: 20
                }
            },
            legend: {
                type: 'plain',
                left: 10,
                top: 10
            },
            
            tooltip: {
                textStyle: {
                    // color: 'red'
                }
            },
            xAxis: {
                data: []
            },
            yAxis: {
                splitNumber: 4
            },
            series: [
                {
                    name: '销量（元）',
                    type: 'line',
                    data: [],
                    smooth: true,
                    lineStyle: {
                        // color: 'lightblue',
                        width: 4
                    },
                }
            ]
        });

        // 发出请求
        this.loadTuBiao1Data();
    },
    methods: {
        async loadTuBiao1Data() {
            const res = await fetchTubiao1(this.tubiao1range[0], this.tubiao1range[1]);

            console.log(res);

            // 拿到数据之后，如何更改图表？
            this.tubiao1.setOption({
                xAxis: {
                    data: res.map(item => item.t)
                },
                series: [
                    {
                        data: res.map(item => item.v)
                    }
                ]
            });
        },
        disabledDate(rizi) {
            // console.log();

            // 返回true表示禁用这个日子
            return Date.parse(rizi) < 1588262400000 || Date.parse(rizi) > Date.parse(new Date());
        },
        cgTB1rg(days) {
            this.tubiao1range = [
                Date.parse(new Date()) - 86400000 * days,
                Date.parse(new Date())
            ];
        }
    },
    watch: {
        tubiao1range() {
            this.loadTuBiao1Data();
        }
    }
}
</script>

<style lang="less" scoped>
.tubiao1 {
    // width: 600px;
    width: 100%;
    height: 220px;
    // border: 1px solid rgb(218, 218, 218);
    margin-top: 10px;
}

.title_wrap {
    display: flex;
    // flex-direction:row-reverse;
    justify-content: flex-end;
}
</style>